<template>
  <section class="appearance mt-8 md:mt-16 lg:mt-24 xl:mt-56 py-8">
    <h2 class="text-center font-bold text-xl lg:text-5xl">外观简约，简而不凡</h2>

    <p class="max-w-4xl mx-auto text-md p-4 lg:text-3xl lg:py-16">
      颠覆传统矿机大笨重的形象，人人云化繁为简，结合当下最潮流的轻简主义设计，精致小巧，时尚大气。
    </p>

    <div class="flex flex-col items-center xl:flex-row xl:justify-center my-8">
      <div class="tip">
        <img src="../assets/imgs/a1.png" alt="" />
        <div>
          <div class="zh">主机强韧不变形</div>
          <div class="en">The main engine is strong and flexible</div>
        </div>
      </div>
      <div class="tip">
        <img src="../assets/imgs/a2.png" alt="" />
        <div>
          <div class="zh">阳极氧化喷绘工艺</div>
          <div class="en">Anodic oxidation spray painting process</div>
        </div>
      </div>
      <div class="tip">
        <img src="../assets/imgs/a3.png" alt="" />
        <div>
          <div class="zh">MINI机箱卧式</div>
          <div class="en">MINI case horizontal</div>
        </div>
      </div>
      <div class="tip">
        <img src="../assets/imgs/a4.png" alt="" />
        <div>
          <div class="zh">摆脱工业级矿机</div>
          <div class="en">Get rid of industrial-grade miners</div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.tip {
  display: flex;
  align-items: center;
  font-family: MicrosoftYaHei;
  padding: 8px 24px;

  img {
    width: 34px;
    height: auto;
    object-fit: cover;
    margin: 8px 16px;
  }

  .zh {
    font-size: 20px;

    @media (min-width: 1024px) {
      font-size: 28px;
    }
  }

  .en {
    color: #999;
    font-size: 10px;
  }
}
</style>